<template>
  <div class="app-page">
    <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="150px">
      <div class="main">
        <div class="form-title">基本信息</div>
        <div class="form-main">
          <el-form-item label="企业名称:" prop="corpName">
            <el-input v-model.trim="temp.corpName" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="企业简称:" prop="corpAliasName">
            <el-input v-model.trim="temp.corpAliasName" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="企业官网:" prop="corpWebsite">
            <el-input v-model.trim="temp.corpWebsite" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="企业介绍:" prop="corpIntroduction">
            <el-input v-model.trim="temp.corpIntroduction" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="所属区域:" prop="address">
            <el-cascader ref="cascader" :key="cascaderKey" v-model="temp.address" style="width: 100%;" :props="addressProps" clearable />
          </el-form-item>
          <el-form-item label="公司地址:" prop="corpAddress">
            <!-- <el-input v-model.trim="temp.corpAddress" placeholder="请输入" clearable /> -->
            <div style="display: flex;">
              <el-autocomplete
                ref="suggestionInput"
                v-model="temp.corpAddress"
                v-scrollLoad="getLoad"
                :maxlength="50"
                :debounce="300"
                popper-class="address-autocomplete"
                :fetch-suggestions="(queryString, cb) => queryAddressSearch(queryString, cb)"
                placeholder="请输入联系地址"
                :trigger-on-focus="false"
                @select="handleSelect"
              />
              <el-button type="primary" style="width: 20%;" @click="location">定位</el-button>
            </div>
          </el-form-item>
          <el-form-item label="联系电话:" prop="corpPhone">
            <el-input v-model.trim="temp.corpPhone" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="联系邮箱:" prop="corpEmail">
            <el-input v-model.trim="temp.corpEmail" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="营业时间:" prop="corpBusinessDt">
            <el-input v-model.trim="temp.corpBusinessDt" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="企业Logo:" prop="logoUrl">
            <el-upload
              ref="upload"
              class="avatar-uploader"
              action="//upload.qiniup.com/"
              accept=".bmp, .gif, .jpg, .jpeg, .png, image/bmp, image/gif, image/jpg, image/jpeg, image/png"
              :data="qiniuData.logoUrl"
              :show-file-list="false"
              :on-success="(res, file)=>handleAvatarSuccess(res, file, 'logoUrl')"
              :before-upload="(file)=>beforeAvatarUpload(file, 'logoUrl')"
            >
              <img v-if="temp.logoUrl" :src="temp.logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="企业宣传视频:" prop="corpVideo">
            <el-upload
              ref="upload"
              class="avatar-uploader"
              action="//upload.qiniup.com/"
              accept=".wmv, .asf, .asx, .rm, .rmvb, .mpg, .mpeg, .mpe, .mov, .mp4, .m4v, .avi, .dat, .mkv, .flv, .vob"
              :data="qiniuData.corpVideo"
              :show-file-list="false"
              :on-success="(res, file)=>handleAvatarSuccess(res, file, 'corpVideo')"
              :before-upload="(file)=>beforeAvatarUpload(file, 'corpVideo')"
            >
              <!-- <img v-if="temp.corpVideo" :src="temp.corpVideo" class="avatar"> -->
              <video v-if="temp.corpVideo" width="270" height="150" controls :src="temp.corpVideo" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="企业宣传图片:" prop="corpUrl" style="width: 100%;">
            <el-upload
              ref="upload"
              class="avatar-uploader"
              action="//upload.qiniup.com/"
              list-type="picture-card"
              :file-list="fileList"
              accept=".bmp, .gif, .jpg, .jpeg, .png, image/bmp, image/gif, image/jpg, image/jpeg, image/png"
              :data="qiniuData.corpUrl"
              :on-success="(res, file)=>handleAvatarSuccess(res, file, 'corpUrl')"
              :before-upload="(file)=>beforeAvatarUpload(file, 'corpUrl')"
              :on-remove="handleRemove"
              :limit="5"
              :on-exceed="exceedFile"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
        </div>
        <div class="form-title">法人信息</div>
        <div class="form-main">
          <el-form-item label="法人姓名:" prop="corpPerson">
            <el-input v-model.trim="temp.corpPerson" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="性别:" prop="sex">
            <!-- <el-input v-model.trim="temp.sex" placeholder="请输入" clearable /> -->
            <el-select v-model="temp.sex" placeholder="请选择">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号:" prop="corpPersonCard">
            <el-input v-model.trim="temp.corpPersonCard" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="法人照片:" prop="corpPersonUrl">
            <span class="point-red">*</span>
            <el-upload
              ref="upload"
              class="avatar-uploader"
              action="//upload.qiniup.com/"
              accept=".bmp, .gif, .jpg, .jpeg, .png, image/bmp, image/gif, image/jpg, image/jpeg, image/png"
              :data="qiniuData.corpPersonUrl"
              :show-file-list="false"
              :on-success="(res, file)=>handleAvatarSuccess(res, file, 'corpPersonUrl')"
              :before-upload="(file)=>beforeAvatarUpload(file, 'corpPersonUrl')"
            >
              <img v-if="temp.corpPersonUrl" :src="temp.corpPersonUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="人像面照片:" prop="sfzhUrl">
            <span class="point-red2">*</span>
            <el-upload
              ref="upload"
              class="avatar-uploader"
              action="//upload.qiniup.com/"
              accept=".bmp, .gif, .jpg, .jpeg, .png, image/bmp, image/gif, image/jpg, image/jpeg, image/png"
              :data="qiniuData.sfzhUrl"
              :show-file-list="false"
              :on-success="(res, file)=>handleAvatarSuccess(res, file, 'sfzhUrl')"
              :before-upload="(file)=>beforeAvatarUpload(file, 'sfzhUrl')"
            >
              <img v-if="temp.sfzhUrl" :src="temp.sfzhUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="国徽面照片:" prop="sfzhBackUrl">
            <span class="point-red2">*</span>
            <el-upload
              ref="upload"
              class="avatar-uploader"
              action="//upload.qiniup.com/"
              accept=".bmp, .gif, .jpg, .jpeg, .png, image/bmp, image/gif, image/jpg, image/jpeg, image/png"
              :data="qiniuData.sfzhBackUrl"
              :show-file-list="false"
              :on-success="(res, file)=>handleAvatarSuccess(res, file, 'sfzhBackUrl')"
              :before-upload="(file)=>beforeAvatarUpload(file, 'sfzhBackUrl')"
            >
              <img v-if="temp.sfzhBackUrl" :src="temp.sfzhBackUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </div>
        <div class="form-title">营业执照信息</div>
        <div class="form-main">
          <el-form-item label="统一社会信用代码:" prop="cardBusCode">
            <el-input v-model.trim="temp.cardBusCode" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="营业期限:" prop="cardBusDt">
            <!-- <el-input v-model.trim="temp.cardBusStartDt" placeholder="请输入" clearable /> -->
            <el-date-picker
              v-model="cardBusDt"
              style="width: 100%;"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="证件照片:" prop="imageUrl5">
            <span class="point-red">*</span>
            <el-upload
              ref="upload"
              class="avatar-uploader"
              action="//upload.qiniup.com/"
              accept=".bmp, .gif, .jpg, .jpeg, .png, image/bmp, image/gif, image/jpg, image/jpeg, image/png"
              :data="qiniuData.imageUrl5"
              :show-file-list="false"
              :on-success="(res, file)=>handleAvatarSuccess(res, file, 'imageUrl5')"
              :before-upload="(file)=>beforeAvatarUpload(file, 'imageUrl5')"
            >
              <img v-if="temp.imageUrl5" :src="temp.imageUrl5" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </div>
      </div>
      <!-- <el-form-item label="客户电话:" prop="corpPhone" class="block">
        <el-input v-model.trim="temp.corpPhone" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="安全须知链接地址:" prop="securityUrl" class="block">
        <el-input v-model.trim="temp.securityUrl" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="二维码:" prop="wxUrl">
        <el-upload
          ref="upload"
          class="avatar-uploader"
          action="//upload.qiniup.com/"
          accept=".bmp, .gif, .jpg, .jpeg, .png, image/bmp, image/gif, image/jpg, image/jpeg, image/png"
          :data="qiniuData"
          :show-file-list="false"
          :on-success="(res, file)=>handleAvatarSuccess(res, file, 'wxUrl')"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="temp.wxUrl" :src="temp.wxUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="芯片匹配:" class="block">
        <el-select v-model="temp.xrule" style="width: 200px;" placeholder="请选择" clearable>
          <el-option
            v-for="item in xruleMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
        <span style="margin-left: 20px; color: #606266;">
          最少 <el-input-number v-model="temp.xmin" style="width: 80px;" :precision="0" :controls="false" /> 位
        </span>
        <span style="margin-left: 20px; color: #606266;">
          最多 <el-input-number v-model="temp.xmax" style="width: 80px;" :precision="0" :controls="false" /> 位
        </span>
      </el-form-item>
      <el-form-item label="气瓶匹配:" class="block">
        <el-select v-model="temp.grule" style="width: 200px;" placeholder="请选择" clearable>
          <el-option
            v-for="item in xruleMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
        <span style="margin-left: 20px; color: #606266;">
          最少 <el-input-number v-model="temp.gmin" style="width: 80px;" :precision="0" :controls="false" /> 位
        </span>
        <span style="margin-left: 20px; color: #606266;">
          最多 <el-input-number v-model="temp.gmax" style="width: 80px;" :precision="0" :controls="false" /> 位
        </span>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" class="bottom" :loading="$loadingPlugin.submit" @click="save">保存配置</el-button>
      </el-form-item>
    </el-form>
    <location ref="location" />
  </div>
</template>

<script>
  import { queryMap, queryQiniuyunUploadToken, selectAreaCode, saveCorpInfo, queryCordInfo } from '@/api'
  import { getLocalSearch } from '@/utils/BMap'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { mapGetters } from 'vuex'
  import { imgBaseUrl } from '@/utils/config'
  import Location from '../../customerCenter/customerManage/components/Location.vue'

  export default {
    name: 'CorpTab',
    components: { Location },
    directives: {
      scrollLoad: {
        bind(el, binding, vnode) {
          const wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
          const listDom = el.querySelector('.el-autocomplete-suggestion__list')
          wrapDom.addEventListener(
            'scroll',
            e => {
              const condition =
                listDom.offsetHeight -
                wrapDom.offsetHeight +
                37 -
                0.3 -
                wrapDom.scrollTop
              if (condition < 0 && !vnode.context.loading) {
                // 滚动到底部则执行滚动方法load，binding.value就是v-scrollLoad绑定的值，加()表示执行绑定的方法
                binding.value()
              }
            },
            false
          )
        }
      }
    },
    data() {
      const validatePhone = (rule, value, callback) => {
        if (isNaN(Number(value))) {
          callback(new Error('请输入数字'))
        }
        callback()
      }
      const validateIdNum = (rule, value, callback) => {
        if (!(/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(value))) {
          callback(new Error('请输入正确的身份证号'))
        }
        callback()
      }
      return {
        imgBaseUrl,
        corpInfo: {},
        qiniuData: { // 这里是直接绑定data的值
          logoUrl: {
            key: '', // 图片名字处理
            token: '', // 七牛云token
            data: {},
            bucket: ' '
          },
          corpUrl: {
            key: '',
            token: '',
            data: {},
            bucket: ' '
          },
          corpVideo: {
            key: '',
            token: '',
            data: {},
            bucket: ' '
          },
          corpPersonUrl: {
            key: '',
            token: '',
            data: {},
            bucket: ' '
          },
          sfzhUrl: {
            key: '',
            token: '',
            data: {},
            bucket: ' '
          },
          sfzhBackUrl: {
            key: '',
            token: '',
            data: {},
            bucket: ' '
          },
          imageUrl5: {
            key: '',
            token: '',
            data: {},
            bucket: ' '
          }
        },
        xruleMap: [],
        cascaderKey: 1,
        temp: {
          corpName: '',
          corpPerson: '',
          address: [],
          corpAddress: '',
          corpPhone: '',
          logoUrl: '',
          corpUrl: '',
          corpVideo: '',
          corpPersonUrl: '',
          sfzhUrl: '',
          sfzhBackUrl: '',
          imageUrl5: '',
          cardBusCode: '',
          corpPersonCard: '',
          cardBusStartDt: '',
          cardBusEndDt: '',
          corpWebsite: '',
          corpIntroduction: '',
          corpBusinessDt: '',
          corpEmail: '',
          sex: '',
          corpAliasName: ''
        },
        rules: {
          corpName: [{ required: true, message: '请输入企业名称', trigger: 'change' }],
          corpAliasName: [{ required: true, message: '请输入企业简称', trigger: 'change' }],
          address: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
          corpAddress: [{ required: true, message: '请选择公司地址', trigger: 'change' }],
          corpPerson: [{ required: true, message: '请输入法人姓名', trigger: 'change' }],
          sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
          corpPersonCard: [
            { required: true, message: '请输入身份证号', trigger: 'change' },
            { validator: validateIdNum, trigger: 'blur' }
          ],
          cardBusCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'change' }],
          corpPhone: [
            { validator: validatePhone, trigger: 'change' },
            { min: 8, max: 13, message: '请输入8 到 13 位数字', trigger: 'blur' }
          ]
        },
        addressInfo: {
          page_num: 0,
          page_size: 10
        },
        addressProps: {
          checkStrictly: true,
          lazy: true,
          lazyLoad(node, resolve) {
            const { level, value } = node
            mergeAsyncFunc(selectAreaCode, { areaCode: value || 0 })
              .then((res) => {
                const nodes = res.data.map(item => ({
                  value: item.areaCode,
                  label: item.areaName,
                  leaf: level >= 2
                }))
                resolve(nodes)
              })
              .catch(() => {
                node.loading = false
                node.loaded = false
              })
          }
        },
        sexOptions: [
          {
            value: 1,
            label: '男'
          },
          {
            value: 2,
            label: '女'
          }
        ],
        cardBusDt: [],
        fileList: []
      }
    },
    computed: {
      ...mapGetters([
        'userInfo', 'corpSettingData'
      ])
    },
    async created() {
      await Promise.all([this.queryOptionsMap(), this.getQiniuyunUploadToken()])
    },
    mounted() {
      this.init()
    },
    methods: {
      async init() {
        const res = await queryCordInfo()
        this.corpInfo = res.data.rows[0]
        this.temp = Object.assign(this.temp, this.corpInfo, {
          address: [this.corpInfo.provinceCode, this.corpInfo.cityCode, this.corpInfo.countyCode]
        })
        if (this.temp.cardBusStartDt && this.temp.cardBusEndDt) {
          this.cardBusDt = [this.temp.cardBusStartDt, this.temp.cardBusEndDt]
        }
        const corpUrl = this.temp.corpUrl.split(',')
        corpUrl.forEach((item) => {
          this.fileList.push({ url: item })
        })
        this.cascaderKey++
        const xpcodex = this.corpInfo.xpcodex
        const gpcodex = this.corpInfo.gpcodex
        if (xpcodex !== 0) {
          this.temp.xrule = (xpcodex >> 1) & 0xF
          this.temp.xmin = (xpcodex >> 5) & 31
          this.temp.xmax = (xpcodex >> 10) & 31
        }
        if (gpcodex !== 0) {
          this.temp.grule = (gpcodex >> 1) & 0xF
          this.temp.gmin = (gpcodex >> 5) & 31
          this.temp.gmax = (gpcodex >> 10) & 31
        }
      },
      // async getCorpImages() {
      //   const res = await queryCorpImages()
      //   if (res.data.wxUrl) this.temp.wxUrl = imgBaseUrl + res.data.wxUrl
      //   if (res.data.logoUrl) this.temp.logoUrl = imgBaseUrl + res.data.logoUrl
      //   console.log(this.temp.wxUrl + '22')
      // },
      // 查询枚举
      async queryOptionsMap() {
        const res = await mergeAsyncFunc(queryMap, { enumName: 'RegExpType' })
        this.xruleMap = res.data // 芯片匹配
      },
      getLoad() {
        console.log('i am load')
        this.addressInfo.page_num++
        this.$refs.suggestionInput.fetchSuggestions()
      },
      async queryAddressSearch(queryString, cb) {
        this.getAddressSuggestionList(cb)
      },
      // 输入建议
      async getAddressSuggestionList(cb) {
        const address = this.$refs.cascader.getCheckedNodes()[0]
        if (address) {
          const pathNodes = address.pathNodes
          this.temp.provinceName = pathNodes[0].label
          this.temp.cityName = pathNodes[1].label
          this.temp.countryName = pathNodes[2].label
        }
        const params = {
          page_num: this.addressInfo.page_num,
          page_size: this.addressInfo.page_size,
          queryString: (this.temp.provinceName || '') + (this.temp.cityName || '') + (this.temp.countryName || '') + this.temp.csmAddress,
          city: this.temp.cityName
        }
        const res = await getLocalSearch(params)
        console.log(res)
        if (res && res.results && res.results.length > 0) {
          let list = []
          list = res.results.map(item => ({
            value: item.name || '',
            location: item.location,
            address: item.address || '',
            adcode: item.adcode || '',
            province: item.province || '',
            city: item.city || '',
            area: item.area || ''
          }))
          if (this.temp.area && this.temp.countryName) {
            list = list.filter(item => (item.area && item.area.includes(this.temp.countryName)) || (item.area === ''))
          }
          if (cb) {
            this.suggestionList = list
            cb(this.suggestionList)
          } else {
            this.$nextTick(() => {
              if (params.page_num > 0) {
                this.suggestionList = this.suggestionList.concat(list)
                this.$refs.suggestionInput.suggestions = this.suggestionList
              }
            })
          }
        } else {
          if (cb) {
            this.$message.error('未匹配到正确地址信息，请重新输入详细地址')
            cb([])
          }
        }
      },
      // 地址模糊匹配
      handleSelect(item) {
        const latAndLon = item.location
        if (latAndLon && latAndLon.lat && latAndLon.lng) {
          this.temp.point = [latAndLon.lat, latAndLon.lng]
          this.temp.longitude = this.temp.point[1]
          this.temp.latitude = this.temp.point[0]
        }
      },
      // 定位
      async location(index) {
        const res = await this.$refs.location.open()
        console.log('详细地址信息', res)
        // 处理详细地址
        this.temp.corpAddress = res.address
        this.temp.longitude = res.point.lng
        this.temp.latitude = res.point.lat
      },
      // 获取七牛云上传token
      async getQiniuyunUploadToken() {
        const res = await queryQiniuyunUploadToken()
        for (const key in this.qiniuData) {
          this.qiniuData[key].token = res.data
        }
      },
      handleAvatarSuccess(res, file, n) {
        if (n === 'corpUrl') {
          this.temp[n] = this.temp[n] + ',' + imgBaseUrl + res.key
        } else {
          this.temp[n] = imgBaseUrl + res.key
        }
      },
      beforeAvatarUpload(file, name) {
        const key = `${this.userInfo.corpCode}_${new Date().getTime()}_${file.name}`
        this.qiniuData[name].key = key
        return this.qiniuData[name]
      },
      handleRemove(file) {
        console.log(file)
        this.fileList.forEach((item, index) => {
          if (item.url === file.url) {
            this.fileList.splice(index, 1)
          }
        })
        const corpUrl = this.temp.corpUrl.split(',')
        corpUrl.forEach((item, index) => {
          if (item === file.url) {
            corpUrl.splice(index, 1)
          }
        })
        this.temp.corpUrl = corpUrl.join(',')
      },
      exceedFile() {
        this.$message.warning('最多只能上传五张宣传照片')
      },
      save() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          if (!this.temp.imageUrl5 || !this.temp.corpPersonUrl || !this.temp.sfzhUrl || !this.temp.sfzhBackUrl) {
            this.$message.warning('法人相关照片、营业证件照片不能为空')
            return
          }
          const params = {
            corpName: this.temp.corpName,
            corpAliasName: this.temp.corpAliasName,
            corpWebsite: this.temp.corpWebsite,
            corpIntroduction: this.temp.corpIntroduction,
            corpAddress: this.temp.corpAddress,
            corpPhone: this.temp.corpPhone,
            corpEmail: this.temp.corpEmail,
            corpBusinessDt: this.temp.corpBusinessDt,
            logoUrl: this.temp.logoUrl,
            corpUrl: this.temp.corpUrl,
            corpVideo: this.temp.corpVideo,
            corpPerson: this.temp.corpPerson,
            corpPersonCard: this.temp.corpPersonCard,
            sex: this.temp.sex,
            corpPersonUrl: this.temp.corpPersonUrl,
            sfzhUrl: this.temp.sfzhUrl,
            sfzhBackUrl: this.temp.sfzhBackUrl,
            cardBusCode: this.temp.cardBusCode,
            imageUrl5: this.temp.imageUrl5,
            longitude: this.temp.longitude,
            latitude: this.temp.latitude
          }
          if (this.cardBusDt.length > 0) {
            params.cardBusStartDt = this.cardBusDt[0]
            params.cardBusEndDt = this.cardBusDt[1]
          }
          // if (this.temp.wxUrl.includes(imgBaseUrl)) params.wxUrl = params.wxUrl.replace(imgBaseUrl, '')
          // if (this.temp.logoUrl.includes(imgBaseUrl)) params.logoUrl = params.logoUrl.replace(imgBaseUrl, '')
          const address = this.$refs.cascader.getCheckedNodes()[0]
          if (address) {
            const pathNodes = address.pathNodes
            params.province = pathNodes[0].label
            params.provinceCode = pathNodes[0].value
            params.city = pathNodes[1].label
            params.cityCode = pathNodes[1].value
            params.county = pathNodes[2].label
            params.countyCode = pathNodes[2].value
          } else {
            params.province = ''
            params.provinceCode = ''
            params.city = ''
            params.cityCode = ''
            params.county = ''
            params.countryCode = ''
          }
          // if (this.temp.securityUrl !== '') {
          //   try {
          //     new URL(this.temp.securityUrl)
          //   } catch (e) {
          //     this.$message.warning('安全须知链接不合法')
          //     return
          //   }
          //   params.securityUrl = this.temp.securityUrl
          // } else {
          //   params.securityUrl = ''
          // }
          if (this.temp.xrule) {
            if (this.temp.xmin) {
              const xresult = this.match(this.temp.xrule, this.temp.xmin, this.temp.xmax)
              params.xpcodex = xresult.codex
              params.xpschema = xresult.schema
            } else {
              this.$message.warning('请输入芯片编码最少位数！')
              return
            }
          }
          if (this.temp.grule) {
            if (this.temp.gmin) {
              const gresult = this.match(this.temp.grule, this.temp.gmin, this.temp.gmax)
              params.gpcodex = gresult.codex
              params.gpschema = gresult.schema
            } else {
              this.$message.warning('请输入气瓶编码最少位数！')
              return
            }
          }
          console.log(params)
          this.submit(params)
        })
      },
      async submit(params) {
        await saveCorpInfo(params)
        this.$notify({
          title: '提示',
          message: '更新企业配置成功',
          type: 'success',
          duration: 2000
        })
      },
      match(rule, min, max) {
        let reg = ''
        if (rule === 1) {
          reg = '[0-9]'
        } else if (rule === 2) {
          reg = '[a-zA-Z]{1,n}-[0-9]'
        } else if (rule === 3) {
          reg = '[a-zA-Z0-9]'
        }

        if (max) {
          if (parseInt(max) < parseInt(min)) {
            this.$message.warning('最多位不能小于最少位！')
            return
          }
        }

        const codex1 = (parseInt(rule) & 0xF) << 1
        const codex2 = (parseInt(min) & 31) << 5
        const codex3 = (parseInt(max) & 31) << 10
        const codex = codex1 | codex2 | codex3
        if (rule === 2) {
          min = min - 1 + '-n'
          max = max - 1 + '-n'
        }
        const schema = '^' + reg + '{' + min + ',' + max + '}$'

        const result = { codex: codex, schema: schema }
        return result
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
}

.form {
  .main {
    height: 69vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .form-title {
    margin: 0 0 10px 20px;
    color: #01999F;
  }
  .form-main {
    display: flex;
    flex-wrap: wrap;
  }
  & /deep/ .el-form-item {
    width: 33%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
  .bottom {
    position: relative;
    top: 15px;
    left: -125px;
  }
  /deep/ .el-autocomplete {
    width: 80%;
  }
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  line-height: 178px;
  color: #8c939d;
  text-align: center;
}
.avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.address-autocomplete {
  width: 80%;
}
.point-red {
  position: absolute;
  left: -75px;
  margin-right: 4px;
  color: #F56C6C;
}
.point-red2 {
  position: absolute;
  left: -90px;
  margin-right: 4px;
  color: #F56C6C;
}
</style>
